<template>
	<!-- element-plus -->
	<el-date-picker v-bind="column.component.props" v-model="formParam[column.field]" v-if="elComponentName === 'el-date-picker'"></el-date-picker>
	<component
		v-else-if="componentName.includes('el-')"
		:is="componentMapping[elComponentName]"
		v-bind="column.component.props"
		v-model="formParam[column.field]"
	>
		<template v-if="elComponentName.includes('select')">
			<component
				:is="componentMapping[`el-option`]"
				v-for="(col, index) in column.component?.options"
				:key="index"
				:label="col.label"
				:value="col.value"
			></component>
		</template>
		<template v-else-if="elComponentName.includes('radio-group')">
			<component
				:is="componentMapping[`el-radio`]"
				v-for="(col, index) in column.component?.options"
				:key="index"
				:value="col.value"
				:label="col.label"
			></component>
		</template>
		<template v-else-if="elComponentName.includes('checkbox-group')">
			<component
				:is="componentMapping[`el-checkbox`]"
				v-for="(col, index) in column.component?.options"
				:key="index"
				:value="col.value"
				:label="col.label"
			></component>
		</template>
	</component>
	<!-- 菜单选择 -->
	<dx-tree-select v-else-if="componentName === 'dx-tree-select'" v-bind="column.component.props" v-model="formParam[column.field]"></dx-tree-select>
	<!-- dx-tree-check -->
	<dx-tree-check v-else-if="componentName === 'dx-tree-check'" v-bind="column.component.props" v-model="formParam[column.field]"></dx-tree-check>
	<!-- icon选择 -->
	<dx-icon-select v-else-if="componentName === 'dx-icon-select'" v-model="formParam[column.field]"></dx-icon-select>
	<!-- 上传 -->
	<dx-upload v-else-if="componentName === 'dx-upload'" :mask="false" v-bind="column.component.props" v-model="formParam[column.field]"></dx-upload>
	<!-- 富文本 -->
	<dx-tinymce v-else-if="componentName === 'dx-tinymce'" v-bind="column.component.props" v-model="formParam[column.field]"></dx-tinymce>
	<!-- 自定义 -->
	<dx-v-node v-else-if="typeof column.component?.render === 'function'" :vNode="column.component.render" :param="formParam"></dx-v-node>
	<!-- 选择 -->
	<dx-select v-else-if="componentName === 'dx-select'" v-bind="column.component.props" v-model="formParam[column.field]"></dx-select>
	<!-- 城市选择 -->
	<dx-city-select v-else-if="componentName === 'dx-city-select'" v-bind="column.component.props" v-model="formParam[column.field]"></dx-city-select>
	<!-- 数组 -->
	<dx-array v-else-if="componentName === 'dx-array'" v-bind="column.component.props" v-model="formParam[column.field]"></dx-array>
	<!-- 颜色选取 -->
	<dx-color-picker
		v-else-if="componentName === 'dx-color-picker'"
		v-bind="column.component.props"
		v-model="formParam[column.field]"
	></dx-color-picker>
	<!-- 默认 -->
	<el-input v-else v-model="formParam[column.field]" clearable :placeholder="`请输入${column.label}`"></el-input>
</template>

<script lang="ts" setup name="DxLayerFormItem">
import { markRaw, computed } from 'vue';
const props = defineProps<{
	formParam: { [key: string]: any };
	column: any;
}>();
// 组件映射
const componentMapping = markRaw<{ [key: string]: any }>({
	'el-input': ElInput,
	'el-input-number': ElInputNumber,
	'el-select': ElSelect,
	'el-option': ElOption,
	'el-switch': ElSwitch,
	'el-radio-group': ElRadioGroup,
	'el-radio': ElRadio,
	'el-checkbox-group': ElCheckboxGroup,
	'el-checkbox': ElCheckbox,
	'el-time-picker': ElTimePicker,
});
/**
 * 组件名称
 */
const componentName = computed(() => {
	return props.column.component?.name || '';
});
/**
 * element
 */
const elComponentName = computed(() => {
	return componentName.value;
});
</script>
